<?php get_header(); ?>
<style>
    .read-more a{
        text-align: center;
        display: block;
        line-height: 50px;
        border: 1px solid #eee;
        background-color: #fb7217;
        color: white;
        font-size: 18px;
        font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        font-weight: 300;
    }

    #app ul {
        overflow-x: auto;
    list-style: none;
    white-space:nowrap;
    width: auto;
    }

    #app ul li{
        display: inline-block;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    #app{
        padding-bottom: 10px;
        padding-top: 10px;
        position: relative;
        overflow-x: auto;
        width: auto;
    }
    .item-title{
        font-size: 17px;
        color: #353535;
        position: absolute;
        left: 20px;
        top: 15px;
    }
    .item-label{
        font-size: 12px;
        color: #525252;
        position: absolute;
        left: 20px;
        top: 40px;
    }
    .item-img{
        width: 65px;
        height: 65px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .van-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.van-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.van-button:active::before{opacity:.1}.van-button--disabled::before,.van-button--loading::before{display:none}.van-button--default{color:#323233;background-color:#fff;border:1px solid #ebedf0}.van-button--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.van-button--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.van-button--danger{color:#fff;background-color:#ee0a24;border:1px solid #ee0a24}.van-button--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--info{color:#1989fa}.van-button--plain.van-button--danger{color:#ee0a24}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:50px}.van-button--normal{padding:0 15px;font-size:14px}.van-button--small{height:32px;padding:0 8px;font-size:12px}.van-button__loading{color:inherit;font-size:inherit}.van-button--mini{height:24px;padding:0 4px;font-size:10px}.van-button--mini+.van-button--mini{margin-left:4px}.van-button--block{display:block;width:100%}.van-button--disabled{cursor:not-allowed;opacity:.5}.van-button--loading{cursor:default}.van-button--round{border-radius:999px}.van-button--square{border-radius:0}.van-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.van-button__content::before{content:' '}.van-button__icon{font-size:1.2em;line-height:inherit}.van-button__icon+.van-button__text,.van-button__loading+.van-button__text,.van-button__text+.van-button__icon,.van-button__text+.van-button__loading{margin-left:4px}.van-button--hairline{border-width:0}.van-button--hairline::after{border-color:inherit;border-radius:4px}.van-button--hairline.van-button--round::after{border-radius:999px}.van-button--hairline.van-button--square::after{border-radius:0}
</style>

<!--主内容区-->
<div class="main-body mt-20">
	<div class="container">
		<div class="row d-flex flex-wrap">
			<!--主内容区-->
			<article class="column xs-12 sm-12 md-8 mb-10-xs mb-0-md">
				<!--大图区-->
				<div class="row d-flex flex-wrap mb-20-xs mb-0-md">

					<!--幻灯片-->
					<?php $home_slide = jiangqie_option('home_slide');
					if (is_array($home_slide)) : ?>
						<div class="column xs-12 sm-12 md-12 mb-20-xs mb-0-md">
							<div class="lb-box" id="lb-1">
								<!-- 轮播内容 -->
								<div class="lb-content">
									<?php foreach ($home_slide as $slide) : ?>
										<div class="lb-item active">
											<a href="<?php echo $slide['url'] ?>" target="_blank">
												<img src="<?php echo is_open_cos() ? replace_cos_url($slide['image']['url']) : $slide['image']['url'] ?>" alt="picture loss">
												<div>
													<h2><?php echo $slide['title'] ?></h2>
												</div>
											</a>
										</div>
									<?php endforeach; ?>
								</div>
								<!-- 轮播标志 -->
								<ol class="lb-sign">
									<?php for ($i = 1; $i <= count($home_slide); $i++) :
										if ($i == 1) echo '<li class="active">' . $i . '</li>';
										else echo '<li>' . $i . '</li>';
									endfor; ?>
								</ol>
								<!-- 轮播控件 -->
								<div class="lb-ctrl left">＜</div>
								<div class="lb-ctrl right">＞</div>
							</div>
						</div>
					<?php endif; ?>
				</div>

				<?php $home_post_recommend = home_post_recommend();
				if ($home_post_recommend) : ?>
					<div class="base-list mb-20">
						<h5 class="mb-20">精选文章</h5>
						<div class="row d-flex flex-wrap mb-0-md">
							<!--横向图文列表-->
							<?php foreach ($home_post_recommend as $post) : ?>
								<div class="column md-4 easy-item">
									<figure class="relative">
										<div>
											<a href="<?php echo get_permalink($post['id']) ?>">
												<img alt="" src="<?php echo $post['thumbnail'] ?>" alt="">
											</a>
										</div>
									</figure>
									<figcaption class="title">
										<h3><a href="<?php echo get_permalink($post['id']) ?>"><?php echo $post['title'] ?></a></h3>
									</figcaption>
								</div>
							<?php endforeach; ?>
						</div>
					</div>
				<?php endif; ?>

                <div id="app">
                    <ul>
                        <li>
						<a href="https://app.17fpv.com/share-fpv">
						<van-button color="linear-gradient(to right, rgb(115 251 169 / 64%), rgb(49 159 255))" style="width: 170px;height: 80px;box-shadow:0 3px 8px grey;">
                                <p class="item-title">我要晒机</p>
                                <p class="item-label">比比谁的机最美</p>
                                <img class="item-img" src="<?php echo get_stylesheet_directory_uri() . '/images/handsup.png'; ?>">
                            </van-button></li>
							</a>
                        <li>
                            <a href="https://app.17fpv.com/post-build">
                                <van-button color="linear-gradient(to right, rgb(255 231 162 / 86%), rgb(245, 117, 123))" style="width: 170px;height: 80px;box-shadow:0 3px 8px grey;">
                                    <p class="item-title">创建清单</p>
                                    <p class="item-label">一键生成配置清单</p>
                                    <img class="item-img" src="<?php echo get_stylesheet_directory_uri() . '/images/create-list.png'; ?>">
                                </van-button>
                            </a>
                        </li>
						<li>
                            <a href="https://app.17fpv.com/parts-list">
                                <van-button color="linear-gradient(to right, rgb(173 234 141 / 47%), rgb(71 49 255))" style="width: 170px;height: 80px;box-shadow:0 3px 8px grey;">
                                    <p class="item-title">工具耗材</p>
                                    <p class="item-label">零件装备图鉴</p>
                                    <img class="item-img" src="<?php echo get_stylesheet_directory_uri() . '/images/partslist.png'; ?>">
                                </van-button>
                            </a>
                        </li>
                        <li>
                            <a href="https://bbs.17fpv.com">
                            <van-button color="linear-gradient(to right, rgb(136 234 153 / 67%), rgb(245 241 117))" style="width: 170px;height: 80px;box-shadow:0 3px 8px grey;">
                                <p class="item-title">FPV论坛</p>
                                <p class="item-label">提问灌水闲聊</p>
                                <img class="item-img" src="<?php echo get_stylesheet_directory_uri() . '/images/difficult.png'; ?>">
                            </van-button>
                            </a>
                        </li>
                    </ul>

                </div>

				<!--列表tab-->
				<div class="article-list mb-20">
					<div class="tab_nav-wraper">
						<h1>文章</h1>

						<ul class="tab_nav">
							<li class="tab-nav-li tabNav_active">
								<text>最新</text>
							</li>
							<?php $categories = jiangqie_nav_catsegories();
							foreach ($categories as $cat) : ?>
								<li class="tab-nav-li" data-catid="<?php echo $cat->term_id; ?>">
									<text><?php echo  $cat->name; ?></text>
								</li>
							<?php endforeach; ?>
						</ul>
					</div>

					<!--列表面板区-->
					<ul class="tab_box">
						<li class="tabBox_active">
							<!-- 文章列表 -->
						</li>
					</ul>

					<div class="spinner">
						<div class="rect1"></div>
						<div class="rect2"></div>
						<div class="rect3"></div>
						<div class="rect4"></div>
						<div class="rect5"></div>
					</div>
				</div>
                <div class="read-more"><a href="<?php site_url(); ?>?cat=7">查看更多👉</a></div>

			</article>

			<!--侧边栏-->
			<?php get_sidebar(); ?>
		</div>
	</div>
</div>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>-->
    <script type='text/javascript' src='<?php echo site_url(); ?>/wp-content/themes/jiangqie/js/vue.min.js' id='vue-js'></script>
    <script type='text/javascript' src='<?php echo site_url(); ?>/wp-content/themes/jiangqie/js/vant.min.js' id='vant-js'></script>

    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',
            // template: '<van-button>按钮</van-button>',
        });

        // 调用函数组件，弹出一个 Toast
        // vant.Toast('提示');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        // Vue.use(vant.Lazyload);
    </script>

<?php get_footer(); ?>